<template>
    <div class="container">
    <section>
      <form action="#">
          <p>豪车之家后台登录平台</p>
          <input type="text" placeholder="账号" v-model="user">
          <input type="password" placeholder="密码" v-model="password">
          <button type="button" @click="login">LOGIN</button>
      </form>
    </section>
  </div>
</template>
<script>
export default {
    data() {
        return {
            user:"",
            password:""
        }
    },
    methods: {
        login(){
          this.$ajax({
            url:'exam/login',
            method:'post',
            data:{user:this.user,password:this.password}
          }).then(resp=>{
            if (resp.data.status==0) {
                  alert("登录失败")
              } else {
                localStorage.removeItem("user")
                let a=JSON.parse(localStorage.getItem("user")||"[]")
                a.unshift(resp.data.message)
                localStorage.setItem("user",JSON.stringify(a))
                this.$router.push("/")
              }
          })
        }
    },
}
</script>
<style scoped>
.container{
  width: 100%;
  height: 100%;
  position: fixed;
  overflow: auto;
}
section{
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: linear-gradient(94.3deg,rgba(26,33,64,1) 10.9%,rgba(81,84,115,1) 87.1%);
    overflow: hidden;
}
section::before{
    position: absolute;
    content: "";
    z-index: 2;
    width: 450px;
    height: 450px;
    top: 50%;
    left: 50%;
    transform: translate(-100%,-80%);
    background-color: #FFE538;
    background-image: linear-gradient(147deg,#FFE538 0%,#FF2525 74%);
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.2);
    animation: pulse 1.5s infinite;
}
section::after{
    position: absolute;
    content: "";
    z-index: 2;
    width: 300px;
    height: 300px;
    top: 50%;
    left: 50%;
    transform: translate(10%,20%);
    background-color: #FA8BFF;/* linear-gradient()第一个参数可以为读书，第二个参数中的第一个为颜色值，第二个为百分值 */
    background-image: linear-gradient(45deg,#FA8BFF 0%,#2BD2FF 52%,#2BFF88 90%);
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.2);
    animation: pulse 1.6s infinite;
}
@keyframes pulse {
    50%{
        box-shadow: 0 0 0 50px rgba(255, 255, 255, 0);
    }
    100%{
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    }
}
form{
    position: relative;
    z-index: 3;
    background-color: rgba(255, 255, 255, .1);/* 透明颜色 */
    padding: 45px 30px;
    border-radius: 8px;
    box-shadow: 0 20px 40px rgba(0,0,0,.1);
    border-right: 1px solid rgba(255, 255, 255, .1);
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    backdrop-filter: blur(20px);/* 背景模糊 */
}
form{
    color: #fff;
    display: block;
    text-align: center;
    margin: 0 0 30px 0;
}
input{
    width: 100%;
    height: 50px;
    border-radius: 8px;
    background-color: transparent; /* 背景透明 */
    border: 1px solid rgba(255, 255, 255, .5);
    margin-bottom: 15px;
    padding-left: 15px;
    color: #fff;
    outline: none;
}
input::placeholder{
    color: #fff;
}
button{
    width: 100%;
    height: 50px;
    border: 0;
    background-image: linear-gradient(to right,#02AAB0 0%,#00CDAC 51%,#02AAB0 100%);
    background-size: 200% auto;
    border-radius: 8px;
    color: #fff;
    outline: none;
    cursor: pointer;
    box-shadow: 0 20px 40px rgba(0,0,0,.1);
    transition: ease .4s;
}
button:hover{
    background-position: right center;
    color: #fff;
    text-decoration: none;
}
</style>